class Lunbo {
    // class中 在new的时候会调用constructor函数
    // 原型中的其他方法是不会被调用的
    constructor(obj) {
        this.obj = { ...obj };
        this.index = 0;
        // 需要手动调用原型中的方法
        // 通过当前示例对象this.原型中的函数名();
        this.createUl();
        if (obj.yStyle) this.createOl();
        if (obj.pNext) this.createSpan();
        if (obj.setIn) this.setInEvent();
    }
    setInEvent() {
        var { ele, setTime } = this.obj;
        if (!setTime) setTime = 1000;
        var box = document.getElementById(ele);
        var time = setInterval(this.next.bind(this), setTime);
        box.onmouseenter = function () {
            clesrInterval(time);
        }
        box.onmouseleave = () => {
            time = setInterval(this.next.bind(this), setTime);
        }
    }
    yStyleFun() {
        var { ele } = this.obj;
        var box = document.getElementById(ele);
        var ollis = box.querySelectorAll("ol > li");
        for (let n = 0; n < ollis.length; n++) {
            ollis[n].style.backgroundColor = "#fff";
        }
        ollis[this.index].style.backgroundColor = "#f00";
    }
    // 创建标签的函数
    createUl() {
        // 获取box
        var { ele, images, hDong, xHuan } = this.obj;
        var box = document.getElementById(ele);
        box.style = "position: relative;overflow: hidden;"
        // 创建ul
        var ul = document.createElement("ul");
        ul.style = "display: flex;position: relative;left: 0;"
        if (hDong) {
            ul.style.transition = "left .2s linear";
        }
        box.appendChild(ul);
        // 创建li>img
        var ulLIst = "";
        for (let i = 0; i < images.length; i++) {
            ulLIst += `<li><img src="${images[i]}" /></li>`
        } if (xHuan) {
            ulLIst += `<li><img src="${images[0]}" /></li>`
        }
        ul.innerHTML = ulLIst;
        var ulw = xHuan ? box.offsetWidth * (images.length + 1) : box.offsetWidth * images.length;
        ul.style.width = ulw + "px";
        var imgs = box.getElementsByTagName("img");
        var lis = box.querySelectorAll("ul > li");
        console.log(imgs);
        for (let j = 0; j < imgs.length; j++) {
            imgs[j].style = "display: block;width: 100%;";
            lis[j].style.width = box.offsetWidth + "px";
            lis[j].style.listStyle = "none";
        }
    }
    createOl() {
        // 获取box
        var { ele, images, yClick } = this.obj;
        var box = document.getElementById(ele);
        // console.log(box);
        // 创建ol  ol>li
        var ol = document.createElement("ol");
        ol.style = "display: flex;position: absolute;bottom: 10px; width: 100%;left: 0;justify-content: center;"
        box.appendChild(ol);
        var olLIst = "";
        for (let k = 0; k < images.length; k++) {
            olLIst += `<li></li>`;
        }
        ol.innerHTML = olLIst;
        var lis = box.querySelectorAll("ol > li");
        for (let j = 0; j < lis.length; j++) {
            lis[j].style = "list-style: none;width: 10px;height: 10px;background-color: #fff;margin: 0 8px;"
            if (j == 0) {
                lis[j].style.backgroundColor = "red";
            }
            // 判断是否添加小圆点事件
            if (yClick) {
                lis[j].onclick = this.yClickEvent.bind(this, j);
            }
        }
    }
    yClickEvent(j) {
        this.index = j;
        this.ulLeft();
        this.yStyleFun();
    }
    createSpan() {
        var { ele } = this.obj;
        var box = document.getElementById(ele);
        var span1 = document.createElement("span");
        span1.innerHTML = "上一张";
        var span2 = document.createElement("span");
        span2.innerHTML = "下一张";
        box.appendChild(span1);
        box.appendChild(span2);
        span1.style = "border: 1px solid #000;padding:0 10px;position: absolute;line-height: 40px;top: calc(50% - 20px);background-color: rgba(255, 255, 255, 0.595);left: 0;";
        span2.style = "border: 1px solid #000;padding:0 10px;position: absolute;line-height: 40px;top: calc(50% - 20px);background-color: rgba(255, 255, 255, 0.595);right: 0;";
        span1.onclick = this.prev.bind(this);
        span2.onclick = this.next.bind(this);
    }
    prev() {
        this.index--;
        var {ele,images,yStyle,xHuan} = this.obj;
        var box = document.getElementById(ele);
        var ul = box.querySelector("ul");
        if (this.index < 0 && xHuan) {
            this.index = images.length - 1;
            ul.style.transitionDuration = "0s";
            var l = (this.index + 1) * -box.offsetWidth;
            ul.style.left = l + "px";
        }else if(this.index < 0){
            this.index = images.length - 1;
        }
        setTimeout(this.ulLeft.bind(this),10)
        
        if(yStyle) this.yStyleFun();
    }
    next(){
        this.index++;
        
        var {ele,images,yStyle,xHuan} = this.obj;
        var box = document.getElementById(ele);
        var ul = box.querySelector("ul");
        
        if(this.index == images.length && xHuan){
            this.ulLeft()
            this.index = 0;
            setTimeout(function(){
                ul.style.transitionDuration = "0s";
                ul.style.left = "0px";
            },200)
            if(yStyle) this.yStyleFun();
            return;
        }
        if(this.index == images.length) this.index = 0;
        this.ulLeft()
        
        if(yStyle) this.yStyleFun();
    }

    // 设置ul移动的函数
    ulLeft(){
        var {ele,hDong} = this.obj;
        var box = document.getElementById(ele);
        var ul = box.querySelector("ul");
        if(hDong){
            ul.style.transitionDuration = "0.2s";
        }
        var l = this.index * -box.offsetWidth;
        ul.style.left = l + "px";
    }
}